// http://ionicframework.com/docs/v2/theming/


// App Global Sass
// --------------------------------------------------
// Put style rules here that you want to apply globally. These
// styles are for the entire app and not just one component.
// Additionally, this file can be also used as an entry point
// to import other Sass files to be included in the output CSS.
//
// Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss".
//
// To declare rules for a specific mode, create a child rule
// for the .md, .ios, or .wp mode classes. The mode class is
// automatically applied to the <body> element in the app.

@font-face {
  font-family: 'Ionicons';
  src: url('../assets/fonts/iconfont.eot');
  src: url('../assets/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../assets/fonts/iconfont.woff') format('woff'),
  url('../assets/fonts/iconfont.ttf') format('truetype'),
  url('../assets/fonts/iconfont.svg#iconfont') format('svg');
}

.icon{
  font-family: "Ionicons" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  //-webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

.ion-ios-gm-vf:before {
  content: '\e622';
}
.ion-md-gm-vf:before {
  content: '\e622'
}

.ion-ios-gm-vd:before {
  content: '\e601';
}
.ion-md-gm-vd:before {
  content: '\e601'
}

.ion-ios-gm-vc:before {
  content: '\e797';
}
.ion-md-gm-vc:before {
  content: '\e797'
}

.ion-ios-gm-phone:before {
  content: '\e607';
}
.ion-md-gm-phone:before {
  content: '\e607'
}

.ion-ios-gm-about:before {
  content: '\e641';
}
.ion-md-gm-about:before {
  content: '\e641'
}

.ion-ios-gm-scan:before {
  content: '\e633';
}
.ion-md-gm-scan:before {
  content: '\e633'
}

.ion-ios-gm-close:before {
  content: '\e671';
}
.ion-md-gm-close:before {
  content: '\e671'
}

.ion-ios-gm-share:before {
  content: '\e60f';
}
.ion-md-gm-share:before {
  content: '\e60f'
}

.ion-ios-gm-avatar:before {
  content: '\e613';
}
.ion-md-gm-avatar:before {
  content: '\e613'
}

.ion-ios-gm-notice:before {
  content: '\e600';
}
.ion-md-gm-notice:before {
  content: '\e600'
}

.ion-ios-gm-quotation:before {
  content: '\e612';
}
.ion-md-gm-quotation:before {
  content: '\e612'
}

.ion-ios-gm-stock:before {
  content: '\e614';
}
.ion-md-gm-stock:before {
  content: '\e614'
}

.ion-ios-gm-strategy:before {
  content: '\e670';
}
.ion-md-gm-strategy:before {
  content: '\e670'
}

.transparent-header {
  // This is just to make the header transparent and button/icon with white color
  .toolbar-content,
  .back-button {
    color: white;
  }
  .toolbar-background,
  ion-navbar,
  ion-header {
    background: transparent !important;
    background-color: transparent !important;
  }
  .header-md::after,
  .toolbar-background-ios {
    background-image: none;
    border-bottom: 0;
  }
  .header-ios .toolbar-background-ios,
  .footer-ios .toolbar-background-ios {
    border: 0;
  }
  // ---
}

.ele-border {
  border: solid $gm-primary 1px;
}

.ele-border-r {
  border: solid $gm-primary 1px;
  border-radius: 5px;
}

.input-layout {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  border: solid $gm-primary 1px;
  border-radius: 5px;
  height: 11vw;
  padding: 0 3.2vw;

  ion-icon {
    font-size: 5.2vw;
  }

  ion-label {
    margin-left: 1.6vw;
  }

  input {
    margin-left: 1.6vw;
    text-align: left;
    font-size: 4vw;
    color: $gray-dark;
  }
}

ion-modal.inset-modal {
  // transparent black background overlay
  background-color: rgba(0, 0, 0, .5) !important;
  transition: opacity .25s ease-in-out;
  padding: 20vh 10vw;
}

ion-modal.inset-modal-vp {
  // transparent black background overlay
  background-color: rgba(0, 0, 0, .5) !important;
  transition: opacity .25s ease-in-out;
  padding: 34vh 10vw;
}

.toolbar-title-ios {
  font-size: 2rem;
  font-weight: bold;
}

.white-bg {
  background-color: white;
}

.no-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;

  div {
    font-size: 4vw;
  }
}

.hor-flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.ver-flex-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}